<template>
    <div class="edu-page-warp" style="height:100%">
        <div class="edu-page-title">
            <template v-for="(item, index) in topNavItems">
                <span
                    v-if="item.show"
                    :class="{active: item.value==activeName,'border-right':index!=topNavItems.length-1}"
                    :key="index"
                    @click="clickItem(item,index)"
                >{{ item.label }}</span>
            </template>
        </div>
        <el-card shadow="never" body-style="padding: 24px" style="min-height:100%">
            <template v-for="(item, index) in topNavItems">
                <div :key="index" v-if="item.show">
                    <base-info
                        v-if="activeName=='baseInfo'&&activeName==item.value"
                        :uid="uid"
                        :table-name="item.table"
                        :title="item.label"
                        :ref="'item_'+index"
                        :show-btn="showBtn"
                        :status-info="statusInfo"
                    />
                    <common
                        v-if="activeName!='baseInfo'&&activeName==item.value"
                        :uid="uid"
                        :title="item.label"
                        :table-name="item.table"
                        :is-delete="item.isDelete"
                        :is-multi="item.isMulti"
                        :ref="'item_'+index"
                        :show-btn="showBtn"
                    />
                </div>
            </template>
        </el-card>
    </div>
</template>
<script>
import { mapState } from "vuex";
import { getVisibleTabList, getStatusInfoByStudentId } from "common/src/api/studentinfo";
import baseInfo from "./details/baseInfo";
import common from "./details/common";

export default {
    name: "student-base-info",
    components: {
        baseInfo,
        common
    },
    props: {
        sid: {
            type: String,
            required: false
        }
    },
    data() {
        return {
            currentIndex: 0,
            activeName: "baseInfo",
            uid: "",
            showBtn: true,
            statusInfo: null, //学籍基本信息
            topNavItems: [
                {
                    label: this.$t("student.baseInfo"),
                    value: "baseInfo",
                    table: [
                        "student_basic_information_t",
                        "student_contact_information_t"
                    ],
                    isDelete: false,
                    isMulti: false,
                    show: false
                },
                {
                    label: this.$t("student.status"),
                    value: "statusInfo",
                    table: [
                        "student_status_information_t",
                        "student_admission_information_t"
                    ],
                    isDelete: false,
                    isMulti: false,
                    show: false
                },
                {
                    label: this.$t("student.educationalBackground"),
                    value: "educationInfo",
                    table: "student_educational_backgroud_t",
                    isDelete: true,
                    isMulti: true,
                    show: false
                },
                {
                    label: this.$t("student.workExperience"),
                    value: "workInfo",
                    table: "student_work_experience_t",
                    isDelete: true,
                    isMulti: true,
                    show: false
                },
                {
                    label: this.$t("student.jointTraining"),
                    value: "trainInfo",
                    table: "student_joint_training_t",
                    isMulti: true,
                    isDelete: true,
                    show: false
                },
                {
                    label: this.$t("student.certificateInfo"),
                    value: "certificateInfo",
                    table: "student_paperwork_t",
                    isDelete: true,
                    isMulti: true,
                    show: false
                },
                {
                    label: this.$t("student.contacts"),
                    value: "contactsInfo",
                    table: "student_family_members_t",
                    isDelete: true,
                    isMulti: true,
                    show: false
                },
                {
                    label: this.$t("student.dormitory"),
                    value: "dormitoryInfo",
                    table: "student_dormitory_t",
                    isDelete: false,
                    isMulti: false,
                    show: false
                },
                {
                    label: this.$t("student.other"),
                    value: "otherInfo",
                    table: ["student_passport_t", "student_other_infomation_t"],
                    isDelete: false,
                    isMulti: false,
                    show: false
                }
            ]
        };
    },
    created() {
        let session = localStorage.getItem("sessiondata");
        session = JSON.parse(session);
        let user = session.mockUser || session.user;
        if (this.sid) {
            this.uid = this.sid;
        } else if (this.$route.params.id) {
            this.uid = this.$route.params.id;
        } else {
            this.uid = user.uid;
        }
        //学院教务员,无修改权限
        if (user.innerRoles.includes("2")) {
            this.showBtn = false;
        }
        getVisibleTabList(this.uid).then(res => {
            if (res.code == 200) {
                this.topNavItems.forEach(item => {
                    //TODO:临时解决方法，最好直接调用接口，返回可见分类标签信息
                    if (res.data.includes(item.label)) {
                        item.show = true;
                    }
                });
            }
        });
        getStatusInfoByStudentId(this.uid).then(res => {
            if (res.code == 200 && res.data && res.data.length) {
                this.statusInfo = res.data[0];
            }
        });
    },
    methods: {
        clickItem(item, index) {
            if (index == this.currentIndex) return;
            let refName = "item_" + this.currentIndex;
            let obj = this.$refs[refName];
            let module = Array.isArray(obj) ? obj[0] : obj;
            let changeNav = () => {
                this.activeName = item.value;
                this.currentIndex = index;
            };
            if (module.checkModify) {
                let modifyStatus = module.checkModify();
                if (modifyStatus == null) return;
                if (modifyStatus) {
                    this.$confirm(
                        "您的当前操作尚未保存，是否确认切换页签？",
                        this.$t("message.prompt"),
                        {
                            confirmButtonText: this.$t("message.confirm"),
                            cancelButtonText: this.$t("message.cancel"),
                            type: "warning"
                        }
                    )
                        .then(() => {
                            changeNav();
                        })
                        .catch(() => {});
                } else {
                    changeNav();
                }
            } else {
                changeNav();
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.edu-page-title {
    span {
        cursor: pointer;
        display: inline-block;
        padding-right: 10px;
    }
    span.active {
        color: #2876c2;
    }
}
</style>
